<template>
  <div>
    <el-card>

      <el-form :model="news"
               :rules="rules"
               ref="ruleForm">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="标题:"
                          :label-width="formLabelWidth"
                          prop="title">
              <el-input v-model="news.title"
                        style="width:210px"
                        autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="类型:"
                          :label-width="formLabelWidth">
              <el-select v-model="news.type"
                         placeholder="请选择">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="语言:"
                          :label-width="formLabelWidth">
              <el-select v-model="news.languageType"
                         @change="langChange"
                         placeholder="请选择">
                <el-option v-for="item in languageType"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排名:"
                          :label-width="formLabelWidth"
                          prop="sequence">
              <el-input-number v-model.number="news.sequence"
                               :min="1"
                               autocomplete="off"></el-input-number>
            </el-form-item>
            <el-form-item label="文章:"
                          :label-width="formLabelWidth"
                          prop="articleId">
              <el-select v-model="news.articleId"
                         filterable
                         remote
                         :remote-method="search"
                         @change="change"
                         placeholder="请选择">
                <el-option v-for="item in rows"
                           :key="item.id"
                           :label="item.title"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主图:"
                          :label-width="formLabelWidth"
                          prop="coverPic">
              <el-upload :action="uploadUrl"
                         :headers={token:token}
                         :file-list="imgList"
                         list-type="picture-card"
                         :disabled="false"
                         :on-success="imgSuccess"
                         :show-file-list="false">

                <div slot="tip"
                     class="el-upload__tip">只能比例为16:9的</div>
                <img v-if="news.coverPic"
                     :src="news.coverPic"
                     class="avatar">
                <i v-else
                   class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="摘要:"
                          :label-width="formLabelWidth"
                          prop="summary">
              <el-input type="textarea"
                        placeholder="请输入摘要"
                        :rows="6"
                        v-model="news.summary"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-button type="primary"
                   @click="sumbit">确 定</el-button>
      </div>
      <p>选择完文章后预览效果如下：</p>
      <div v-html="html"></div>
    </el-card>
  </div>
</template>
<script>
import { getArticleList } from "@/api/article";
import { getNews, addNews, updateNews } from "@/api/news";
import { getToken } from "@/utils/auth";
import { domain } from "@/config";
export default {
  data() {
    return {
      imgList: [],
      rows: [],
      formLabelWidth: "55px",
      news: {
        type: 1,
        sequence: 0,
        coverPic: "",
        title: "",
        summary: "",
        articleId: "",
        languageType: 0,
        id: 0
      },
      options: [
        {
          value: 0,
          label: "动态"
        },
        {
          value: 1,
          label: "媒体报告"
        }
      ],
      languageType: [
        {
          value: 0,
          label: "中文"
        },
        {
          value: 1,
          label: "英文"
        }
      ],
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur"
          }
        ],
        articleId: [
          { required: true, message: "请选择文章素材", trigger: "blur" }
        ],
        sequence: [
          { required: true, message: "请输入排名", trigger: "blur" },
          { type: "number", message: "年龄必须为数字值" }
        ],
        coverPic: [
          { required: true, message: "请选择图片", trigger: "change" }
        ],
        summary: [{ required: true, message: "请填写摘要", trigger: "change" }]
      },
      pageOpts: {
        type: 0,
        curPage: 1,
        limit: 999,
        total: 0,
        offset: 0,
        languageType: 0,
        search: {
          sort: "createTime",
          sortOrder: "desc",
          status: "0",
          fuzzyParam: ""
        }
      },
      html: ""
    };
  },
  async created() {
    await this.getArticleList();
    await this.getNews();
    await this.change();
  },
  methods: {
    async init() {
      const load = this.$loading();
      this.news = {
        type: 1,
        sequence: 0,
        languageType: 0,
        coverPic: "",
        summary: "",
        title: "",
        articleId: "",
        id: 0
      };
      this.imgList = [];
      this.html = "";
      load.close();
    },
    async langChange(languageType) {
      this.news.languageType = languageType;
      this.pageOpts.languageType = languageType;
      await this.getArticleList();
      this.news.articleId = "";
      this.change();
    },
    async getNews() {
      if (!this.newsId) {
        return this.init();
      }
      const data = await getNews(this.newsId);
      this.imgList = [{ name: "img", url: data.coverPic }];
      this.news = data;
    },
    async getArticleList() {
      const { rows } = await getArticleList(this.pageOpts, true);
      this.rows = rows;
    },
    search(val) {
      this.pageOpts.search.fuzzyParam = val;
      this.getArticleList();
    },
    async change() {
      if (!this.news.articleId) {
        this.html = "";
        return;
      }
      const [{ url }] = this.rows.filter(_ => _.id == this.news.articleId);
      const { data } = await this.$http.get(url);

      this.html = data;
    },
    async sumbit() {
      const isValid = this.valid("ruleForm");
      if (!isValid) {
        this.$message({
          message: "请完善提交内容",
          type: "error",
          center: true
        });
        return;
      }
      !this.newsId && (await addNews(this.news));
      this.newsId && (await updateNews(this.news));
      this.$message({
        message: "提交成功",
        type: "success",
        center: true
      });
      // this.$router.push({
      //   name: "NewsList"
      // });
    },
    valid(formName) {
      let isValid;
      this.$refs[formName].validate(vaild => {
        isValid = vaild;
      });
      return isValid;
    },
    imgSuccess({ data }) {
      this.news.coverPic = data;
    }
  },
  computed: {
    newsId() {
      return this.$route.query.id | null;
    },
    token() {
      return getToken();
    },
    uploadUrl() {
      return `${domain}/web/common/uploadFile`;
    }
  },
  watch: {
    $route() {
      this.getNews();
    }
    // languageType(curVal) {
    //   this.pageOpts.languageType = curVal;
    // }
  }
};
</script>
<style lang="scss" scoped>
.avatar {
  width: 146px;
  height: 146px;
  display: block;
}
</style>


